<template>
  <button 
    :class="[
      'btn', 
      `btn-${type}`, 
      size ? `btn-${size}` : '', 
      rounded ? 'rounded-full' : '',
      block ? 'w-full' : '',
      ghost ? 'btn-ghost' : '',
      { 'opacity-60 cursor-not-allowed': disabled },
      className
    ]" 
    :disabled="disabled || loading"
    @click="$emit('click', $event)"
  >
    <span v-if="loading" class="animate-spin mr-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24">
        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
      </svg>
    </span>
    <span v-if="$slots.icon" class="btn-icon">
      <slot name="icon" />
    </span>
    <span class="btn-content"><slot /></span>
  </button>
</template>

<script>
export default {
  name: 'Button',
  props: {
    type: {
      type: String,
      default: 'primary',
      validator: (value) => ['primary', 'secondary', 'outline', 'text', 'success', 'warning', 'error'].includes(value)
    },
    size: {
      type: String,
      default: '',
      validator: (value) => ['', 'sm', 'lg'].includes(value)
    },
    rounded: {
      type: Boolean,
      default: false
    },
    block: {
      type: Boolean,
      default: false
    },
    ghost: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    className: {
      type: String,
      default: ''
    }
  },
  emits: ['click']
}
</script>

<style>
.btn {
  border-radius: var(--radius-lg);
  padding: var(--spacing-2) var(--spacing-6);
  font-weight: 500;
  transition: all var(--transition-normal) var(--transition-bounce);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  gap: var(--spacing-2);
  outline: none;
  border: none;
  position: relative;
  overflow: hidden;
}

.btn:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
  top: -150%;
  left: -150%;
  opacity: 0;
  transition: all 0.6s var(--transition-timing);
}

.btn:active:after {
  opacity: 0.3;
  top: -50%;
  left: -50%;
}

.btn-primary {
  background: var(--color-primary);
  color: white;
  box-shadow: 0 2px 5px rgba(59, 130, 246, 0.2);
}

.btn-primary:hover:not(:disabled) {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(0);
  filter: brightness(0.95);
}

.btn-secondary {
  background: var(--color-gray-100);
  color: var(--color-gray-700);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--color-gray-200);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-secondary:active:not(:disabled) {
  transform: translateY(0);
  background: var(--color-gray-300);
}

.btn-outline {
  background: var(--color-background);
  border: 1px solid var(--color-gray-200);
  color: var(--color-gray-700);
}

.btn-outline:hover:not(:disabled) {
  background: var(--color-gray-50);
  border-color: var(--color-gray-300);
  transform: translateY(-2px);
}

.btn-outline:active:not(:disabled) {
  transform: translateY(0);
  background: var(--color-gray-100);
}

.btn-text {
  background: transparent;
  color: var(--color-gray-700);
  padding: var(--spacing-1) var(--spacing-2);
}

.btn-text:hover:not(:disabled) {
  background: var(--color-gray-50);
  color: var(--color-gray-900);
}

.btn-success {
  background: var(--color-success);
  color: white;
  box-shadow: 0 2px 5px rgba(16, 185, 129, 0.2);
}

.btn-success:hover:not(:disabled) {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-warning {
  background: var(--color-warning);
  color: white;
  box-shadow: 0 2px 5px rgba(245, 158, 11, 0.2);
}

.btn-warning:hover:not(:disabled) {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.btn-error {
  background: var(--color-error);
  color: white;
  box-shadow: 0 2px 5px rgba(239, 68, 68, 0.2);
}

.btn-error:hover:not(:disabled) {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.btn-ghost {
  background: transparent;
  box-shadow: none;
}

.btn-ghost.btn-primary {
  color: var(--color-primary);
}

.btn-ghost.btn-success {
  color: var(--color-success);
}

.btn-ghost.btn-warning {
  color: var(--color-warning);
}

.btn-ghost.btn-error {
  color: var(--color-error);
}

.btn-ghost:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.05);
}

.btn-sm {
  padding: var(--spacing-1) var(--spacing-3);
  font-size: var(--font-size-sm);
}

.btn-lg {
  padding: var(--spacing-3) var(--spacing-8);
  font-size: var(--font-size-lg);
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

@media (prefers-color-scheme: dark) {
  .btn-outline {
    border-color: var(--color-gray-600);
    color: var(--color-gray-300);
  }
  
  .btn-secondary {
    background: var(--color-gray-700);
    color: var(--color-gray-100);
  }
  
  .btn-text {
    color: var(--color-gray-300);
  }
  
  .btn-text:hover:not(:disabled) {
    background: var(--color-gray-800);
    color: var(--color-gray-100);
  }
  
  .btn-ghost:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
  }
}
</style> 